<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件数：父组件与子组件</title>
</head>

<body>
    <script src="js/vue.js"></script>
    <div id="app">
        <!-- 3.使用组件 -->
        <!-- <cpn1></cpn1> -->
        <cpn2></cpn2>

    </div>

    <script>

        //1.创建组件构造器
        const cpnC1 = Vue.extend({
            template: `
            <div>
            <h2>标题1</h2>
            <p>内容1</p>
            </div>
            `
        })

        const cpnC3 = Vue.extend({
            template: `
            <div>
            <h2>标题3</h2>
            <p>内容3</p>
            </div>
            `
        })
        Vue.component('my-cpn',cpnC3)//2.注册组件(全)

        const cpnC2 = Vue.extend({
            template: `
            <div>
            <h2>标题2</h2>
            <p>内容2</p>
            <cpn1></cpn1>
            <my-cpn></my-cpn>
            </div>
            `,
             components:{
                cpn1:cpnC1
            }
        })

        //2.注册组件
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'hello world'
            },
            components:{
                cpn1:cpnC1,
                cpn2:cpnC2
            }
        })
    </script>

</body>

</html>